<template>
  <div class="add-form t-form">
    <div class="nb-tittle">{{ title }}</div>
    <div v-if="editId" class="step" style="margin-left: -10px">
      <el-steps :active="active" finish-status="finish" process-status="wait" align-center>
        <el-step title="申请" />
        <el-step title="审核" description="赵丹" />
        <el-step title="审批" description="潘海峰" />
        <el-step title="完成" />
      </el-steps>
    </div>
    <el-form ref="form" :model="data" label-width="110px" hide-required-asterisk class="hx-form" :rules="rules">
      <el-tabs v-if="!editId" v-model="activeName" class="t-tabs" @tab-click="handleClick">
        <el-tab-pane label="增值税专用发票" name="first" />
        <el-tab-pane label="增值税普通发票" name="second" />
      </el-tabs>
      <el-tabs v-if="editId" v-model="activeType" class="t-tabs">
        <el-tab-pane :label="activeTitle" name="first" />
      </el-tabs>
      <el-row>
        <el-col :span="6">
          <el-form-item label="项目名称：">
            <v-select v-model="data.project_id" action="projectList" :query="{ status:5 }" class="detail-input" @change="getContract" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="合同编号：">
            <el-input v-model="data.contract_code" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="单位名称：" prop="agent">
            <el-input v-model="data.agent" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="纳税人识别号：" prop="trn">
            <el-input v-model="data.trn" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="注册地址：" prop="payee_address">
            <el-input v-model="data.payee_address" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="注册电话：">
            <el-input v-model="data.payee_mobile" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="开户银行：" prop="bank">
            <el-input v-model="data.bank" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="银行账户：" prop="payee_account">
            <el-input v-model="data.payee_account" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="发票金额：" prop="invoice_sum">
            <el-input v-model="data.invoice_sum" type="number" :precision="2" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="开票次数：" prop="invoice_times">
            <el-input v-model="data.invoice_times" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="邮寄地址：" prop="mailing_address">
            <el-input v-model="data.mailing_address" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系人：" prop="contacts">
            <el-input v-model="data.contacts" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="电话：" prop="contacts_mobile">
            <el-input v-model="data.contacts_mobile" />
          </el-form-item>
        </el-col>
        <el-col v-if="editId && isSuper" :span="6">
          <el-form-item label="创建人：">
            <el-input v-model="data.cr_admin.name" />
          </el-form-item>
        </el-col>
        <el-col v-if="editId && isSuper" :span="6">
          <el-form-item label="创建时间：">
            <el-input v-model="data.create_time" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item style="margin-top: 22px">
        <el-button v-if="data.status === 1 && isExamine" type="success" @click="statusChange(2)">审核</el-button>
        <el-button v-if="data.status === 2 && isAllow" type="success" @click="statusChange(3)">审批</el-button>
        <el-button v-if="data.status === 3 && isFinish" type="success" @click="statusChange(4)">开票完成</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import API from '@/api/invoice/invoice'
import CONTRACT from '@/api/contract/contract'
import VSelect from '@/components/select'
import { mapGetters } from 'vuex'
import RETURNED from '@/api/returned/returned'
export default {
  inject: ['goUrl', 'isEdit', 'add', 'update', 'isNumeric', 'setStorage', 'clearStorage', 'getStorage', 'super', 'examine', 'allow', 'finish'],
  components: { VSelect },
  data() {
    const invoiceSum = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请填写发票金额'))
      }
      setTimeout(() => {
        const isNumber = this.isNumeric(value)
        if (!isNumber) {
          callback(new Error('请输入数字值'))
        } else {
          callback()
        }
      }, 400)
    }
    return {
      data: {
        type: 1,
        status: 1,
        contract_code: '',
        invoice_times: '',
        agent: '',
        cr_admin: {
          name: ''
        }
      },
      invoice_date: '',
      activeType: 'first',
      title: '',
      editId: '',
      activeTitle: '',
      active: 0,
      activeName: 'first',
      value: '',
      isSuper: false,
      isExamine: false,
      isAllow: false,
      isFinish: false,
      rules: {
        project_id: { required: true, message: '请输入项目名称', trigger: 'change' },
        contract_id: { required: true, message: '请输入合同编号', trigger: 'change' },
        agent: { required: true, message: '请输入招标单位', trigger: 'change' },
        invoice_sum: [{ validator: invoiceSum, trigger: 'blur' }],
        trn: { required: true, message: '请输入纳税人版号', trigger: 'change' },
        bank: { required: true, message: '请输入开户银行', trigger: 'change' },
        payee_account: { required: true, message: '请输入银行账户', trigger: 'change' },
        payee_address: { required: true, message: '请输入注册地址', trigger: 'change' },
        payee_mobile: { required: true, message: '请输入注册电话', trigger: 'change' },
        mailing_address: { required: true, message: '请输入邮寄地址', trigger: 'change' },
        contacts: { required: true, message: '请输入联系人', trigger: 'change' },
        contacts_mobile: { required: true, message: '请输入电话', trigger: 'change' },
        invoice_times: { required: true, message: '请输入开票次数', trigger: 'change' },
        status: { required: true, message: '请选择状态', trigger: 'change' }
      }
    }
  },
  computed: {
    ...mapGetters(['userId'])
  },
  mounted() {
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },
  created() {
    const edit = this.isEdit()
    this.isSuper = this.super()
    this.isExamine = this.examine()
    this.isAllow = this.allow()
    this.isFinish = this.finish()
    if (edit) {
      this.title = '发票申请详情'
      this.editId = edit
      this.info()
    } else {
      this.title = '新增发票申请'
      if (this.getStorage('invoice')) {
        this.data = this.getStorage('invoice')
        this.getContractTimes(this.data.contract_code)
      }
    }
  },
  methods: {
    beforeunloadHandler(e) {
      this.clearStorage('invoice')
    },
    info() {
      API.detail(this.editId).then(res => {
        this.data = res.data
        if (this.data.type === 1) {
          this.activeTitle = '增值税专用发票'
        } else {
          this.activeTitle = '增值税普通发票'
        }
        this.active = res.data.status
      })
    },
    cancel() {
      if (!this.editId) {
        this.setStorage('invoice', this.data)
      }
      this.goUrl('/invoice')
    },
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.editId) {
            this.update(API, this.data, '更新成功')
          } else {
            delete this.data.cr_admin
            this.add(API, this.data, '新增成功')
            this.clearStorage('invoice')
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleClick(tab) {
      this.data.type = parseInt(tab.index) + 1
    },
    getContract() {
      const query = {
        project_id: this.data.project_id
      }
      CONTRACT.contractList(query).then(res => {
        if (this.data.contract_code === '' && res.data.data[0].code) {
          this.data.contract_code = res.data.data[0].code
          this.data.agent = res.data.data[0].agent
          console.log(res.data)
        }
        this.getContractTimes(this.data.contract_code)
      })
    },
    getContractTimes(contract_code) {
      API.invoiceTimes({ contract_code }).then(res => {
        if (res.data) {
          this.data.invoice_times = res.data
        }
      })
    },

    statusChange(status, message) {
      const postData = {
        id: this.editId,
        status
      }
      API.invoiceStatus(postData).then(res => {
        if (res.data.error_code !== 1) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success(message || '操作成功')
          this.goUrl('/invoice')
          if (status === 4) {
            const data = { invoice_id: this.data.id }
            RETURNED.create(data)
          }
        }
      })
    }
  }
}
</script>

<style>
.t-form .el-form-item__content{
  width: calc(100% - 110px);
}
.t-form .el-input{
  width: 130px;
}

</style>
